﻿<html>
<head>
    <meta charset="utf-8">
    <title>袋鼠好车抽奖活动</title>

    <style>
        *{padding:0; margin:0;}
        body{
            background:url('./static/img/bg3.jpg');
            background-size:cover;
            width:auto;
            height:auto;
            max-width:100%;
            max-height:100%
        }
        .container{width:400px; height:200; position:fixed; top:50%; left:50%; margin:30px 0 0 -200px; text-align:center; }
        .result-box{ background-color:#ffffff; text-align:center; line-height:60px; font-size:34px;}
        button{ width:200px; height:50px; line-height:50px; margin-top:30px; border:none; color:#ffffff; font-size:24px;}
        button:focus{outline:none;}
        .start{ background-color:#428bca;}
        .end{ background-color:#d9534f;}
    </style>

</head>
<body>
<input type="button" style="margin-left: 80%;background-color:yellowgreen;width:200px; height:50px; line-height:50px; margin-top:30px; border:none; color:#ffffff; font-size:24px;" value="中奖列表" onClick="load()"></input>
<div class="container">
    <div id="lottery" class="result-box">
        ***********
    </div><!--result-box-->
    <button class="start" onClick="start()">开始抽奖</button>
</div><!--container-->
<script type="text/javascript" src="./static/js/jquery.min.js"></script>
<script type="text/javascript">
    function $_GET(name){
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);//search,查询？后面的参数，并匹配正则
        if(r != null) return unescape(r[2]);
        return null;
    }

    $(document).ready(function(){
        getPhone();
        if($_GET('prize')){
            $("body").css({
                "background": "url('./static/img/bg" + $_GET('prize') + ".jpg')",
                "background-size": "cover"
            });
        }else{
            $("body").css({
                "background": "url('./static/img/bg" + 3 + ".jpg')",
                "background-size": "cover"
            });
        }
    })
    var phones = [];//参与人员
    var btn = true; //按钮状态未开始还是结束
    var lotteryList = [];//中奖人员名单
    var prize = 0;//奖品
    var time = 0; //定时器
    function getPhone(){
        $.ajax({
            url: "/lottery/getLotteryPhoneList",
            dataType: "json",
            success(data, status){
                if(data.code == 200){
                    phones = data.list
                }
            },
            error(){
            },
            type: 'POST'
        })
    }

    function runTime(){
        //$("button").show();
        clearInterval(time);
        $.ajax({
            url: "/lottery/index",
            dataType: "json",
            success(data, status){
                if(data.code == 200){
                    lotteryList = data.lottery
                    prize = data.prize
                    time = setInterval('trunNum()', 10);
                }else if(data.code == 400){
                    btn = false;
                    $("button").removeClass("start").addClass("end").text(data.msg);
                    $('button').attr('disabled', true)
                    if(prize.type == 1){
                        var r = confirm('抽奖已经结束，是否跳到中奖列表');
                        if(r){
                            window.location.href = '/lottery/list';
                        }else{
                            return;
                        }
                    }else{
                        var r = confirm('该轮抽奖已经结束，是否继续下一轮？');
                        if(r){
                            window.location.href = '/?prize=' + (prize.type - 1);
                        }else{
                            return;
                        }
                    }
                }else{
                    btn = false;
                    $("button").removeClass("start").addClass("end").text(data.msg);
                    $('button').attr('disabled', true)
                }
            },
            error(){
            },
            type: 'POST'
        })
    }

    //点击按钮
    function start(){
        if(btn){
            btn = false;
            $("button").removeClass("start").addClass("end").text("结束抽奖");
            startTrun();
        }else{
            btn = true;
            $("button").removeClass("end").addClass("start").text("开始抽奖");
            endTrun();
        }
    }

    function trunNum(){
        var text = "<input type='hidden' value='" + lotteryList[0] + "'>";
        key = Math.floor(Math.random() * (phones.length - 1));
        var tel = phones[key].toString().substr(0, 3) + '****' + phones[key].toString().substr(7);
        $("#lottery").text(tel);
        $('#lottery').append(text);
    }

    //开始转动数字
    function startTrun(){
        runTime();
    }

    //停止转动数字
    function endTrun(){
        $('.container').children('.result-box').each(function(index, element){
            $(element).text($(element).children().val());
            $("body").css({
                "background": "url('./static/img/bg" + prize.type + ".jpg')",
                "background-size": "cover"
            });
        })
        //alert('恭喜你获得了' + prize.type + '等奖' + prize.name)
        clearInterval(time);
    }

    function load(){
        window.location.href = '/lottery/list'
    }
</script>
</body>
</html>

